<form nz-form [formGroup]="addForm" class="modal-add-form" (ngSubmit)="onSubmit($event)">

    <div nz-row [nzGutter]="24" style="margin-bottom: 24px;">
        <div nz-col [nzSpan]="6" style="text-align: right; line-height: 1.57; justify-content: center;">
            <span style="align-content: center;">上级权限:</span>
        </div>
        <div nz-col>
            <nz-tree-select style="width: 250px;" [nzExpandedKeys]="expandKeys" [nzNodes]="menuNodes" nzShowSearch
            nzPlaceHolder="Please select" (ngModelChange)="onChange($event)" [(ngModel)]="parentValue" 
            [ngModelOptions]="{standalone: true}">
        </nz-tree-select>
        </div>
    </div>
            
    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="menuType" nzRequired>权限类型</nz-form-label>
        } @else { 
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="menuType">权限类型</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-radio-group formControlName="menuType">
                <div *ngFor="let menuType of menuTypes" nz-radio [nzValue]="menuType.key">
                    {{menuType.display}}
                </div>
            </nz-radio-group>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="menuName" nzRequired>权限名称</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="menuName">权限名称</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" nz-input formControlName="menuName" placeholder="权限名称" id="menuName" />
            @if (editMode == modeEnum.ADD) {
            <div *ngIf="submitted && fm['menuName'].invalid" class="alert">
                <div *ngIf="fm['menuName'].errors?.['rquired']">请输入权限名</div>
                <div *ngIf="fm['menuName'].errors?.['minlength']">权限名称不少于2个字</div>
                <div *ngIf="fm['menuName'].errors?.['maxlength']">权限名称不超过20个字</div>
            </div>
            }
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        @if (editMode == modeEnum.ADD) {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientId" nzRequired>客户端Id</nz-form-label>
        } @else {
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="clientId">客户端Id</nz-form-label>
        }
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select formControlName="clientId" (ngModelChange)="onClientChange($event)">
                <nz-option *ngFor="let client of clients" [nzValue]="client.clientId"
                    [nzLabel]="client.clientName"></nz-option>
            </nz-select>
        </nz-form-control>
        
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="perms">权限字符</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input formControlName="perms" placeholder="权限权限" id="perms" />
            <div *ngIf="submitted && fm['perms'].invalid" class="alert">
                <div *ngIf="fm['perms'].errors?.['rquired']">请输入权限字符</div>
                <div *ngIf="fm['perms'].errors?.['minlength']">权限字符不少于2个字</div>
                <div *ngIf="fm['perms'].errors?.['maxlength']">权限名称不超过20个字</div>
            </div>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="path">组件路径</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" nz-input formControlName="path" placeholder="组件路径" id="path" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="orderNum">排序</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <input class="default-input" nz-input formControlName="orderNum" placeholder="排序" id="orderNum" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="isFrame">是否外链</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-select formControlName="isFrame" [nzAllowClear]="true">
                <nz-option [nzValue]="true" [nzLabel]="'是'"></nz-option>
                <nz-option [nzValue]="false" [nzLabel]="'否'"></nz-option>
            </nz-select>
        </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="visible">可见状态</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-select name="visible" formControlName="visible" [nzAllowClear]="true">
                        <nz-option [nzValue]="true" [nzLabel]="'显示'"></nz-option>
                        <nz-option [nzValue]="false" [nzLabel]="'隐藏'"></nz-option>
                    </nz-select>
                </nz-form-control>
    </nz-form-item>
    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="enabled">菜单状态</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <nz-select class="dept-enabled" name="enabled" formControlName="enabled" [nzAllowClear]="true">
                        <nz-option [nzValue]="true" [nzLabel]="'正常'"></nz-option>
                        <nz-option [nzValue]="false" [nzLabel]="'停用'"></nz-option>
                    </nz-select>
                </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="icon">图标</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
            <ng-container *ngTemplateOutlet="iconPrefix;context: {$implicit: selectedIcon}">
            </ng-container>
            <span style="font-size: 24px;" nz-popover  nzPopoverTitle="Title" [nzPopoverContent]="iconList"> ...</span>
        </nz-form-control>
    </nz-form-item>

    <nz-divider/>

    <div nz-row nzJustify="end" class="action-area">
        <div nz-col >
            @if (editMode == modeEnum.ADD) {
            <button nz-button class="dialog-button" [nzType]="'primary'">添加</button>
            } @else {
            <button nz-button class="dialog-button" [nzType]="'primary'">修改</button>
            }
            <button nz-button class="dialog-button" (click)="onCancel($event)">取消</button>
        </div>
    </div>
</form>

<ng-template #iconPrefix let-icon>
    <span nz-icon [nzType]="icon" nzTheme="outline"></span>
</ng-template>

<ng-template #iconList style="font-size: 24px;">
    <div style="width: 640px; max-height: 640px; overflow-y: auto;">
        <div nz-row [nzGutter]="24">
            @for (icon of icons; track icon) {
            <div class="icons-list" nz-col [nzSpan]="4">
                <div style="font-size: 24px;">
                    <span class="icon-class" nz-icon [nzType]="icon" (click)="onIconClick(icon)"
                    (keydown)="onIconClick(icon)" tabindex="0"></span>
                </div>

            </div>
            }
        </div>
    </div>
</ng-template>